<template>
	<div class="box">
		<!-- 在这里添加你的组件内容 -->
		<p>毕业论文、课题论文、千字大纲免费生成，几万字专业初稿！</p>
		<h1>搞定论文，只需3步：</h1>
		<div class="step1">
			<div class="directory-item">1</div><span>输入论文题目，生成千字大纲</span>
		</div>
		<el-card class="box-card">
			<el-row :gutter="20">
				<el-col :span="6">
					<el-select v-model="value" placeholder="请选择课题" @change="ktSele">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select></el-col>
				<el-col :span="18"><el-input v-model="input" placeholder="请输入完整论文题目" maxlength="50"
						show-word-limit></el-input></el-col>

			</el-row>
			<div class="choseXl">
				<span>选择学历：</span>
				<el-radio-group v-model="radio">
					<el-radio :label="3">专科/本科(0.7~1.5万字)</el-radio>
					<el-radio :label="6">本科(0.8~2万字)</el-radio>
					<el-radio :label="9">研究生(2~3万字)</el-radio>
				</el-radio-group>
			</div>
			<el-row :gutter="20">
				<el-col class="choseXl supMar-top" :span="24"> <el-button type="primary" :disabled='!value||!input'
						round @click='changeStep()'>免费生成大纲</el-button></el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col class="choseXl" :span="24"> <img src="../assets/next.png" alt="" srcset="" /></el-col>

			</el-row>



		</el-card>
		<div class="step2 ">
			<div class="directory-item">2</div><span>编辑大纲，生成全文初稿 </span>

		</div>
		<el-empty v-if="!secondStep" description="输入论文标题生成大纲"></el-empty>
		<div v-else class="ktBox">
			<p class='title'>题目：{{input}}</p>
			<p class='keti'>课题：{{selectedLabel}}</p>
			<el-progress :stroke-width='10' v-if='!isfinish' type="circle" :percentage="progress"
				:status="status"></el-progress>
			<el-card v-if='isfinish' class="box-card">

				<el-tree :data="lunWendata" :props="defaultProps" node-key="id">
					<div class="custom-tree-node" slot-scope="{ node, data }">
						<!-- <i :class="['el-icon-' + (node.isLeaf ? 'document' : 'folder'), { 'is-expand': node.expanded }]"></i>  -->
						<!-- <span>{{ node.label }}</span>  -->
						<span>
							<el-button type="text" icon="el-icon-edit" @click="() => append(data)">
							</el-button>
							<el-button type="text" icon="el-icon-delete"  @click="() => remove(node, data)">
							</el-button>
						</span>
						<!-- 这里可以添加自定义内容 -->
						<template v-if="node.level === 1">
							<!-- 一级节点的自定义内容 -->
							<p>{{ node.label}}</p>
						</template>
						<template v-if="node.level === 2">
							<!-- 二级节点的自定义内容 -->
							<div class="ejGql">
								<p class="ejTm">{{data.id+'.'+ data.label }}</p>
								<span class="ejNr">{{data.content}}</span>
							</div>
						</template>
					</div>
				</el-tree>

			</el-card>

		</div>
		<div class="step2 ">
			<div class="directory-item">3</div><span>下载论文文件</span>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'AIWriting', // 请将ComponentName替换为实际的组件名，例如DataAnalysis  
		data() {
			return {
				lunWendata: [{
					label: '第一章 引言',
					children: [{
							id: 1,
							label: '研究背景',
							content: '介绍材料设计在材料科学与工程中的重要性和应用'

						},
						{
							id: 2,
							label: '研究目的',
							content: '阐明本文旨在探讨材料设计的理论基础和实践应用'

						}, {
							id: 3,
							label: '研究意义',
							content: '说明材料设计对于开发新材料、提高材料性能和实现可持续发展的重要意义'

						}, {
							id: 4,
							label: '研究内容',
							content: '概括本文的研究范围和内容要点，包括材料设计的基本原理和方法'

						}, {
							id: 5,
							label: '研究现状与展望',
							content: '介绍材料设计在材料科学与工程中的重要性和应用'

						}
					]
				}, {
					label: '第二章 材料设计理论基础',
					children: [{
						label: '1. 研究背景',
						content: '阐述材料设计的发展历程、现状和未来发展趋势'
					}, {
						label: '二级 2-2',

					}]
				}, {
					label: '第三章 材料设计方法与工具',
					children: [{
						label: '二级 3-1',

					}, {
						label: '二级 3-2',

					}]
				}, {
					label: '第四章 材料设计在新材料开发中的应用',
					children: [{
						label: '二级 3-1',

					}, {
						label: '二级 3-2',

					}]
				}, {
					label: '第五章 材料设计的挑战与展望',
					children: [{
						label: '二级 3-1',

					}, {
						label: '二级 3-2',

					}]
				}],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				secondStep: false,
				options: [{
					value: '选项1',
					label: '课题一'
				}, {
					value: '选项2',
					label: '课题二'
				}, {
					value: '选项3',
					label: '课题三'
				}, {
					value: '选项4',
					label: '课题四'
				}, {
					value: '选项5',
					label: '课题五'
				}],
				progress: 0, // 进度百分比  
				status: null, // 进度条状态，可以是 'success', 'exception', 'warning' 等  
				timer: null, // 定时器  
				value: '',
				input: '',
				radio: 3,
				selectedLabel: '',
				isfinish: false,
			};
		},
		methods: {
			changeStep() {
				this.secondStep = true
				this.startProgress();
				this.$notify({
					title: '开始生成大纲',
					message: '耗时60秒以内，请不要刷新页面，喝杯咖稍作等待！',
					type: 'success'
				});
			},
			ktSele(val, lab) {
				// this.selectedLabel = 
				this.options.map((item) => {
					if (item.value == val) {
						this.selectedLabel = item.label
					}
				})

			},
			append(data){
				console.log(data)
			},
			handleNodeClick(data) {
				console.log(data);
			},
			startProgress() {
				this.status = null
				this.isfinish = false
				this.timer = setInterval(() => {
					if (this.progress >= 100) {
						this.status = 'success'
						this.isfinish = true
						this.clearTimer(); // 当进度达到100%时，清除定时器  
					} else {
						this.progress += 20; // 每次增加20%，你可以根据需要调整这个值以改变进度增长的速度  
					}
				}, 5000 / 5); // 设置定时器间隔，因为要在5秒内完成，所以总时间5000ms除以5个间隔  
			},
			clearTimer() {
				clearInterval(this.timer); // 清除定时器  
				this.timer = null;
				this.progress = 0

			},



		},
		beforeDestroy() {
			this.clearTimer(); // 在组件销毁前清除定时器  
		},

		// watch: {
		// 	myVariable: {
		// 		handler(newVal, oldVal) {
		// 			// 处理逻辑  
		// 		},
		// 		immediate: false, // 默认就是false，表示在初始化时不调用  
		// 		deep: false // 默认也是false，表示不深度监听  
		// 	}
		// }
	};
</script>
<style scoped>
	p,
	h1 {
		text-align: center;
	}

	p {
		font-size: 24px;
		margin: 50px 0;


	}

	.box {
		display: flex;
		flex-flow: column;
		align-items: center;

	}

	.step1,
	.step2 {
		display: flex;
		flex-flow: row;
		align-items: baseline;
	}

	.step1 span,
	.step2 span {
		margin-left: 10px;
		color: #409eff
	}

	.step2 {
		margin-top: 30px;
	}

	.directory-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25px;
		/* 你可以根据需要调整这个值 */
		height: 25px;
		/* 你可以根据需要调整这个值 */
		border-radius: 50%;
		/* 这将创建一个圆形 */
		background-color: #409eff;
		/* 这是背景颜色 */
		color: white;
		/* 文本颜色 */
		font-size: 16px;
		/* 字体大小 */
		text-align: center;
		/* 文本居中 */
		margin-bottom: 10px;
		/* 每个项目之间的间距 */
	}

	.text {
		font-size: 14px;
	}

	.item {
		padding: 18px 0;
	}

	.box-card {
		width: 880px;
	}

	.choseXl {
		margin-top: 30px;
		text-align: center;
	}

	.supMar-top {
		margin-top: 80px;
	}

	.ktBox p {
		margin: 0;

	}

	.ktBox {
		display: flex;
		flex-flow: column;
		align-items: center;
	}

	.title {
		font-size: 20px;

	}

	.keti {

		margin: 20px 0 !important;
		font-size: 16px;
	}

	>>>.el-tree .el-tree-node .el-tree-node__content {
		padding: 10px 0;
	}

	/* .el-tree-node__content {
		height: none !important;
		padding: 20px 0;
	} */
	/* 
	.el-tree .el-tree-node__content .el-tree-node__label {
		font-size: 18px;
		font-weight: 600;

	} */
	.ejNr {
		font-size: 14px;
		margin-top: 15px;

	}

	.ejTm {
		font-size: 16px;
		font-weight: 600;
	}

	.ejGql {
		display: flex;
		align-items: baseline;
		height: none !important;
		flex-flow: column;
	}

	/* .el-tree-node__children .custom-tree-node {} */

	.custom-tree-node {
		display: flex;
		align-items: center;
		height: none;
		flex-flow: row-reverse;
		justify-content: space-between;
		width: 100%;
		/* 其他样式 */
	}

	.custom-tree-node p {
		font-size: 16px;
		font-weight: 600;
	}
</style>